<script setup lang="ts">
import { ref } from 'vue'
import SonCom from './components/02.父子通讯/SonCom.vue'

const fFood = ref('隆江猪脚饭')
const fDrink = ref('快乐水')
const fPrice = ref(10000)

const func = (newFood: string) => {
  console.log(newFood)
  fFood.value = newFood
}

const func2 = (info: string) => {
  console.log(info)
  fDrink.value += info
}
</script>

<template>
  <div class="father">
    <h2>我是父组件</h2>
    <!-- 父组件改变数据 传递给子组件 -->
    <!-- 行内可以通过$event获取事件的原始参数 -->
    <SonCom
      :food="fFood"
      :drink="fDrink"
      :price="fPrice"
      @change-food="func"
      @change-drink="func2"
      @discount="fPrice *= $event"
    />
    <button @click="fPrice += 2">修改数据</button>
  </div>
</template>

<style scoped>
.father {
  padding: 10px;
  background-color: skyblue;
}
</style>
